<template>
	<view class="custom" :style="[{
			<!--  #ifdef  MP-WEIXIN -->
			'--custom-top': `${statusBarHeight}px`, 
			<!--  #endif -->
			'--custom-height': `${height}px`, 
			'--capsule-width': `${capsule?.width}px`, 
			'--capsule-height': `${capsule?.height}px`, 
			'--capsule-right': `${capsule?.right}px` 
			}]">
		<!-- 导航头 -->
		<view class="nav" :style="[{ '--custom-background': background }]">
			<slot name="content">
				<view class="back" @click="onBack" v-if="back">
					<!-- 返回icon -->
					<uni-icons type="back" color="#000" size="24"></uni-icons>
				</view>
				<!-- 标题 -->
				<view class="title" :style="[{ '--custom-color': color }]">
					<text>{{ title }}</text>
				</view>
			</slot>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'

	interface Props {
		background : string
		back : boolean
		title ?: string
		color : string
	}

	withDefaults(defineProps<Props>(), {
		background: '#fff',
		back: false,
		color: '#25292C'
	})

	const systemStore = useSystemStore()
	const { capsule, statusBarHeight, height } = storeToRefs(systemStore)

	// 返回上一级页面
	const onBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.custom {
		position: relative;

		/*  #ifdef  MP-WEIXIN  */
		padding-top: var(--custom-top);
		/* #endif  */

		height: var(--custom-height);

		.nav {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 5;

			/*  #ifdef  MP-WEIXIN  */
			padding-top: var(--custom-top);
			/* #endif  */

			height: var(--custom-height);
			background: var(--custom-background);
			@include flex($align: center);

			.back {
				position: relative;
				padding: 10rpx 16rpx;
			}

			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				max-width: 380rpx;
				@include tx(36rpx, 50rpx);
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: var(--custom-color);
			}
		}
	}
</style>